<template>
  <el-dialog
    :visible.sync="moduleVisible"
    title="已解锁的增强组件"
    append-to-body
    width="640px"
    custom-class="unlock-cmp-dialog"
  >
    <el-table
      :data="tableData"
      stripe
      height="500"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        align="center"
        header-align="center"
        type="index"
        width="60"
      />
      <el-table-column
        prop="name"
        label="增强组件名称"
        show-overflow-tooltip
        align="center"
        header-align="center"
        width="300"
      />
      <el-table-column
        prop="version"
        label="版本号"
        align="center"
        header-align="center"
        width="100"
      />
      <el-table-column
        prop="date"
        align="center"
        header-align="center"
        label="时间"
      />
    </el-table>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        @click="moduleVisible = false"
        size="small"
        type="primary"
      >确 定</el-button>
      <el-button
        @click="moduleVisible = false"
        size="small"
      >关 闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'UnlockCmp',
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      moduleVisible: false,
    };
  },
};
</script>

<style lang="scss">
.unlock-cmp-dialog {
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  .el-dialog__header {
    padding: 14px 19px 14px 11px;
  }
  .el-dialog__title {
    font-size:15px;
    color: #444;
    font-weight:600;
  }

  .el-dialog__body {
    padding: 0;
    .el-table thead {
      color: #444444;
      font-size: 13px;
    }
    .el-table th>.cell {
      font-weight: normal !important;
    }
  }
  .el-dialog__footer {
    padding: 10px;
    text-align: center;
  }
}
</style>
